<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <top-bar title="报名列表" bgc="background-color:#F3F3F3"></top-bar>
      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell
          v-for="item in activityData"
          :key="item._id"
          :is-link="item.approval"
          @click="activeDetail(item._id)"
          :label="item.appcreatedate"
        >
          <van-row>
            <h3 style="color: #555555;">{{ item.acttopic}}</h3>
          </van-row>
          <van-row style="color: #999999">
            <strong style="color: #666666;">通知：</strong>
            {{item.notice || '暂时没有通知'}}
          </van-row>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      actForm: {},
      loading: false,
      completed: false,
      isLoading: false,
      finished: false,
      activityData: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.actForm.pageSize = this.pageSize;
      this.actForm.pageNum = this.pageNum;
      this.actForm.number = this.userInfo.number;
      this.$api
        .get("/api/activity/list", { params: this.actForm })
        .then(res => {
          console.log(res.data.data.records);
          this.activityData.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getList();
    },
    // 下拉刷新
    pullDown() {
      this.list = [];
      this.pageNum = 1;
      this.activityData = [];
      this.completed = false;
      this.isLoading = true;
      this.getList();
    },
    activeDetail(id) {
      this.$router.push({
        name: "activitydetail",
        params: { id }
      });
    }
  }
};
</script>

<style>
</style>